<template>
  <view id="productID">
    <!-- <view>
      <TableTitle :title="'出厂模拟数据'" @click="openVideo"></TableTitle>
    </view> -->
    <view class="tableContentClass">
      <transition-group name="fade" tag="ul">
        <template v-for="(item, index) in dataLists" :key="index">
          <view class="tableClass" v-if="!item.isReplacing">
            <!-- :class="index % 2 == 0 ? 'tableClass1' : 'tableClass2'" -->
            <li>{{ index + 1 }}</li>
            <li>{{ maskCode(item.code) }}</li>
            <!-- <li>{{ formatDate(item.last_select_date, 'YY年MM月DD') }}</li> -->
          </view>
        </template>
      </transition-group>
    </view>
    <view class="pageClass" style="color: #fff !important">共{{ dataLists.length }}条记录</view>
  </view>
</template>

<script setup lang="ts">
import { useyanZhengStore } from '@/stores/modules/yanZheng'
import { v4 as uuidv4 } from 'uuid'
import { getAllDataAPI, getShuiAllDataAPI } from '@/services/allData'
import { useWebsocketStore } from '@/stores/modules/websocket'
const yanZhengStore = useyanZhengStore()
const nextId = ref(0)
const dataLists = ref(new Array())
const url = ref('')
// function aotuAddData() {
//   // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
//   let oldUUID = uuidv4().split('-')
//   let newUUID = (oldUUID[0] + '********' + oldUUID[oldUUID.length - 1]).toUpperCase()
//   // console.log(newUUID)
//   dataLists.value.push({ code: newUUID, isReplacing: false })
// }

// function aotuDelData() {
//   let index = Math.floor(Math.random() * 10)
//   // console.log(index)

//   // 标记为正在替换
//   dataLists.value[index].isReplacing = true

//   setTimeout(() => {
//     // 移除旧项，并在同一位置添加新项
//     dataLists.value.splice(index, 1)
//     nextId.value++
//   }, 500) // 确保这个延时与.fade-leave-active的持续时间一致
// }

// setInterval(() => {
//   if (dataLists.value.length < 10) aotuAddData()
// }, 2000)

// setInterval(() => {
//   if (dataLists.value.length >= 10) aotuDelData()
// }, 5000)

//#region
// 用于掩码处理的函数
function maskCode(code: string): string {
  return code.slice(0, 10) + '****' + code.slice(-10)
}
async function getData() {
  dataLists.value.length = 0
  let url = ''
  if (yanZhengStore.index == 'water') {
    url = `/shui/get/allWaterData`
  } else if (yanZhengStore.index == 'maotai') {
    url = `/product/get/list/data/maotai`
  } else if (yanZhengStore.index == 'cha') {
    url = `/product/get/list/data/cha`
  } else if (yanZhengStore.index == 'bao') {
    url = `/product/get/list/data/bao`
  } else if (yanZhengStore.index == 'yifu') {
    url = `/product/get/list/data/yifu`
  } else if (yanZhengStore.index == 'xie') {
    url = `/product/get/list/data/xie`
  } else if (yanZhengStore.index == 'lang') {
    url = `/product/get/list/data/lang`
  } else if (yanZhengStore.index == 'niunai') {
    url = `/product/get/list/data/niunai`
  } else if (yanZhengStore.index == 'jiancai') {
    url = `/product/get/list/data/jiancai`
  } else if (yanZhengStore.index == 'yao') {
    url = `/product/get/list/data/yao`
  }
  let res: any
  let lists = []
  if (yanZhengStore.index == 'water') {
    res = await getShuiAllDataAPI()
    lists = []
    for (let key in res.data) {
      console.log(res.data[key])
      lists.push({ code: res.data[key].code })
    }
  } else {
    res = await getAllDataAPI(url) //获取数据
    console.log(res.data.data)
    for (let key in res.data.data) {
      console.log(res.data.data[key].唯一码)

      lists.push({ code: res.data.data[key].唯一码 })
    }
  }

  console.log(lists)
  let NewLists = lists.map((item: any) => {
    // item.add('isReplacing', false)
    return { ...item, isReplacing: false }
  })
  // 创建一个新数组，基于B的内容，以防更改原始数组B
  let newB = NewLists.slice()
  // 找出A中存在，B中不存在的元素
  dataLists.value.forEach((item, indexA) => {
    // 检查当前元素是否在数组B中
    let indexB = NewLists.findIndex((bItem) => bItem.code === item.code)
    // 如果不在B中，找到的indexB会是-1
    if (indexB === -1) {
      // 在数组B的对应位置插入{code: ' '}
      newB.splice(indexA, 0, { code: ' ', isReplacing: false })
    }
  })

  console.log(newB)
  dataLists.value = [...newB]
  console.log(' dataLists.value', dataLists.value)
}
getData()

watch(
  () => useWebsocketStore().date,
  () => {
    getData()
  },
)

watch(
  () => yanZhengStore.code,
  () => {
    removeItem(yanZhengStore.code)
  },
)

function removeItem(item: any) {
  console.log('item', item)
  const index = dataLists.value.findIndex((i) => i.code == item[1])
  let data = { ...dataLists.value[index] }
  data.code = item[0]
  yanZhengStore.data = data
  console.log('找到了', index)
  if (index !== -1) {
    // 标记为正在替换
    dataLists.value[index].isReplacing = true

    setTimeout(() => {
      // 移除旧项，并在同一位置添加新项
      dataLists.value.splice(index, 1)
      dataLists.value.unshift(data)
      nextId.value++
    }, 500) // 确保这个延时与.fade-leave-active的持续时间一致
  }
}

const inter = ref()
onMounted(() => {})
onUnmounted(() => {
  clearInterval(inter.value)
})

//#endregion
</script>

<style lang="scss" scoped>
#productID {
  position: absolute;
  // top: 10.7rem;
  left: 0.9rem;
  height: 39.8vh;
  font-size: 18px;
  display: flex;
  .tableContentClass {
    background: #0000;
    width: 20vw;
    height: 100%;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }

    ul {
      padding-inline-start: 0 !important;
    }

    .tableClass {
      margin: 5px 0 !important;
      padding: 0 1vw !important;
      border-bottom: 1px #fff dashed;
      height: 3.5vh;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      &.tableClass1 {
        height: 52px;
        background: #002b79;
        opacity: 0.8;
      }
      &.tableClass2 {
        height: 52px;
        background: #00215c;
        opacity: 0.8;
      }
      li {
        color: #0ff;
        display: inline-block;
        &:nth-child(2n) {
          width: 90% !important;
          color: #fff;
        }
        &:nth-child(2n-1) {
          width: 10% !important;
        }
      }
    }
  }
  .pageClass {
    position: absolute;
    bottom: -2.3vh;
    right: 0.7vh;
    font-size: 1.5vh;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0.1;
}
</style>
